<template>
	<view class="wrap">
		<view class="tilt1">设置支付密码</view>
		<view class="tilt2">请重复输入一次</view>
		<view class=""><u-message-input mode="bottomLine" :focus="true" :value="defaultValue" :maxlength="6" active-color="#ffbb00" @finish="finish"></u-message-input></view>
		<view class="btnWrap"><view class="btn-bg-yellow" @click="comfirmBtn">确认</view></view>
		<u-popup v-model="showStatus" mode="center" border-radius="20" width="550rpx" height="150px">
			<view class="font-34 font-bold u-text-center pad-t-b-20 mt-20">绑定成功！</view>
			<button type="default" class="sureBtn btn-bg-yellow" @click="back">知道了</button>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			defaultValue: '',
			psd: '',
			showStatus: false
		};
	},
	onLoad(option) {
		this.psd = option.psd;
	},
	methods: {
		finish(e) {
			console.log('输入结束，当前值为：' + e);
			this.defaultValue = e;
		},
		comfirmBtn() {
			if (this.psd === this.defaultValue) {
				this.SetPayPassword()
			} else {
				uni.showToast({
					title: '两次输入的密码不一致！',
					icon: 'none'
				});
				this.defaultValue = '';
			}
		},
		async SetPayPassword() {
			let data = {
				'payPwd': this.psd
			};
			try{
				const res= await this.$api.user.SetPayPassword(data)
				// console.log(res)
				this.showStatus = true;
			}catch(e){
				console.log(err)
				//TODO handle the exception
			}
		},
		back() {
			this.showStatus = false;
			// uni.navigateBack({
			// 	delta: 3
			// });
			uni.redirectTo({
				url:'/pages_common/pages_me/assets/assetsManage/assetsManage'
			})
		}
	}
};
</script>

<style scoped lang="scss">
.wrap {
	width: 100%;
	min-height: 100vh;
	background: #ffffff;
	.tilt1,
	.tilt2 {
		width: 85%;
		margin: 60rpx auto;
		font-size: 48rpx;
	}
	.tilt2 {
		width: 85%;
		margin: 60rpx auto;
		font-size: 30rpx;
		color: #999;
	}
	.btnWrap {
		width: 90%;
		margin: 60rpx auto;
		.btn-bg-yellow {
			width: 100%;
			height: 90rpx;
			line-height: 90rpx;
		}
	}
	.sureBtn {
		width: 80%;
		margin: 10%;
		height: 80rpx;
		line-height: 80rpx;
		color: #3d3d3d;
	}
}
</style>
